<template>
  <div class="project-page">
    <searchHeader :bg="false" isHome="true"/>
    <tabBox v-if="channels.length" :tabs="channels" @selectTab="handleSelect" />
    <div class="page-position">
      <div class="item-content">当前位置：首页>{{ "项目首页" }}
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb> -->

      </div>
    </div>
    <div class="search-optins item-content">
        <el-row class="input-content" type="flex" align="center">
            <el-col :span="24">
                <el-input type="text" v-model="serachStr" placeholder="输入招标关键字搜索" />
                <el-button @click="handleSearch">搜索</el-button>
            </el-col>
        </el-row>
        <el-row class="area-content" type="flex" align="center">
            <el-col :span="2">地区：<span :class="['region-name',{'acitve-area' : selectArea == ''}]" @click="handleSelectArea('')">全国</span></el-col>
            <el-col :span="22">
                <div class="region-area" v-for="item in regionAreas" :key='item.id'>
                    <span :class="['area-name',{'acitve-area' : selectArea == item.id}]" @click="handleSelectArea(item.id)">[{{item.name}}]</span>
                    <span :class="['area-name',{'acitve-area' : selectArea == area.areaId}]" v-for="area in item.regionAreaList" @click="handleSelectArea(area.areaId)" :key="area.areaId">{{area.areaName}}</span>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-container class="item-content">
      <!-- <el-header> </el-header> -->
      <el-container class="mt-2">
        <el-main>
            <el-table :data="articleList" stripe style="width: 100%" border>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="title" label="公告标题" ></el-table-column>
                <el-table-column prop="date" label="地区" width="200">
                  <template v-slot="{row}">
                    {{row.provinceName + '-'+ row.cityName}}
                  </template>
                </el-table-column>
                <el-table-column prop="updateDate" label="时间" width="150"></el-table-column>
            </el-table>
            <el-row class="mt-2" type="flex" align="center" justify="center">
                <el-pagination
                    prev-text="上一页"
                    next-text="下一页"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-main>

        <el-aside width="400px">
            <div class="imgs">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
            </div>
            <boxCard title="推荐公告" :list="boxList" />
        </el-aside>
      </el-container>
    </el-container>
    
    
  </div>
</template>
<script>
import boxCard from "./components/card-box";
import tabBox from "./components/tab";
import HomeTitle from "@/components/HomeTitle.vue";

import searchHeader from "@/components/searchHeader.vue";
import { getArea, getRegionArea, getAticleType, searchDoc } from "@/api/api.js";

export default {
  components: {
    searchHeader,
    boxCard,
    HomeTitle,
    tabBox
  },
  data() {
    return {
      activeIndex: "",
      channels: [],
      serachStr: '',
      articleList: [],
      regionAreas: [],
      selectArea: '',
      projectList: [],
      currentPage: 1,
      total: 100,
      boxList: []
    }
  },
  mounted() {
      this.loadAticleType()
      this.loadRegionArea()
  },
  computed: {
      requestParams () {
          return {
              channelId: this.activeIndex,
              pageNo: this.currentPage,
              provinceId: this.selectArea,
              cityId: '',
              pageSize: 20,
              isTitle: 0,
              year: '',
              month: '',
              day: '',
              // selectArea: '',
              q: this.serachStr
          }
      }
  },
  methods: {
    handleSelect(index, path) {
      console.log(path)
      this.activeIndex = index;
      this.handleSearch()
    },
    async loadRegionArea() {
       let {list} = await getRegionArea()
       this.regionAreas = list
       console.log(list)
    },
    async loadAticleType() {
        let {list} = await getAticleType()
        this.activeIndex = list[0].channelId + ''
        this.channels = list.map(item => {
          item.channelId = item.channelId + ''
          return item
        })
        // console.log(res)
    },
    handleSelectArea(areaId) {
        this.selectArea = areaId ? areaId : ''
        console.log(this.selectArea)
        this.handleSearch(areaId)
    },
    async handleSearch (params) {
        let {content, totalPages, totalElements} = await searchDoc({
            ...this.requestParams
        })
        this.total = totalElements
        this.articleList = content
    },
    handleCurrentChange(page){
        console.log(page)
        this.handleSearch()
    }
  }
};
</script>
<style scoped lang="scss">
$bg: #3582b7;

.page-position {
  font-weight: 16px;
  height: 40px;
  line-height: 40px;
}

.el-main{
    padding-top: 0px;
}
.img-item{
    width: 400px;
    height: 94px;
    border: 1px solid #ff5566;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.search-optins{
    height: 150px;
    background: #EAEAEA;
}
.input-content{
    height: 74px;
    border-bottom: 1px dashed #959595;
    padding-left: 10px;
    .el-col{
        display: flex;
        align-items: center;
    }
    .el-input{
        width: 310px;
        height: 30px;
        border-color: #959595;
    }
    
    .el-button{
        margin-left: 10px;
        width: 80px;
        background: #A60F0E;
        font-size: 14px;
        color: #fff;
        box-sizing: border-box;
    }
}
.area-content{
    padding-left: 10px;
    font-size: 14px;
    height: 75px;
    span{
        cursor: pointer;
    }
    .el-col{
        height: 34px;
        &:nth-child(1){
            width: 85px;
            height: 100%;
            padding-top: 10px;
            box-sizing: border-box;
        }
        &:nth-child(2){
            margin-top: 10px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;  
        }
    }
    .region-name{
        margin-right: 10px;
    }
    .area-name{
        margin: 4px 5px;
    }
    
    .region-area{
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .acitve-area{
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
}
.mt-2{
    margin-top: 20px;
}

::v-deep .el-card{
  box-sizing: border-box;
  width: 399px;
  height: 338px;
  background: #FFFFFF;
  overflow: hidden;
 .el-card__header{
    padding: 0 13px;
    height: 34px;
    background: #3582b7;
    color: #fff;
    
  }
  .card-header{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    text-indent: 5px;
    &::before{
      position: absolute;
      content: '';
      top: 10px;
      bottom: 10px;
      width: 2px;
      left: -3px;
      background: #fff;
    }
  }
}

</style>